import CEcharts from '@/components/echarts'
import {ECOption} from '@/libs/global/echarts'
import {coustomEchartTooltip} from '@/libs/toolkit'
import {PropType} from 'vue'

const ParamsBar = defineComponent({
  props: {
    id: {
      type: String,
      required: true
    },
    width: {
      type: String,
      required: true
    },
    height: {
      type: String,
      required: true
    },
    paramEchartData: {
      type: Array as unknown as PropType<[any, any, any]>,
      required: true
    }
  },
  setup(props, ctx) {
    const state = reactive<{
      option: ECOption
    }>({
      option: {}
    })

    watch(
      () => props.paramEchartData,
      n => {
        state.option = {
          tooltip: {
            trigger: 'axis',
            className: 'tooltipBox',
            formatter: (params: any) =>
              coustomEchartTooltip(params, {contentTitle: '参数异常占比', contentValueUnit: '%'})
          },
          grid: {
            left: '3%',
            right: '3%',
            top: '10%',
            bottom: '14%'
          },
          xAxis: {
            data: n[0],
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#BFBFBF'
              }
            },
            axisLabel: {
              fontSize: '14px',
              fontWeight: 500,
              fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
              color: '#31456A',
              margin: 30
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E5E8EF'
              }
            },
            axisLabel: {
              fontSize: '12px',
              color: '#bfbfbf'
            }
          },
          animation: true,
          animationDuration: 3000,
          series: [
            {
              name: 'bar1',
              type: 'bar',
              stack: 'one',
              data: n[1],
              barWidth: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6BDF98' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#19AD54' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              label: {
                position: 'top',
                show: true,
                formatter(params) {
                  return params.value ? String(params.value) + '%' : ''
                }
              }
            },
            {
              name: 'bar2',
              type: 'bar',
              stack: 'one',
              data: n[2],
              barWidth: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#fff' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FF7223' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              label: {
                position: 'bottom',
                show: true,
                color: '#FF7223',
                formatter(params) {
                  return params.value ? String(params.value) + '%' : ''
                }
              }
            }
          ]
        }
      },
      {immediate: true, deep: true}
    )

    return () => (
      <CEcharts
        id={props.id}
        width={props.width}
        height={props.height}
        option={state.option as ECOption}
      ></CEcharts>
    )
  }
})

export default ParamsBar
